<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Question</title>
    <link rel="stylesheet" href="./github.min.css">
    <script src="./highlight.min.js"></script>
    <style>
        body {
          font-size: 14px;
          line-height: 1.6;
          margin: 0;
          padding: 16px;
        }
        img {
          max-width: 100%;
        }
        pre code {
           background-color: #f5f5f5 !important;
           border-radius: 8px;
        }
    </style>
</head>
<body>
<div id="content"></div>
<script>
    // 可以给空白页面 投喂 结构
   function writeHtml(str) {
     const el = document.querySelector('#content');
     el.innerHTML = str;
     hljs.highlightAll();
   }
    // writeHtml('123')
   // 前端文字结构<span>123</span>  等价于鸿蒙中Text('123')
   // 前端大标题结构<h1>123</h1>
   // 前段列表结构  <ul><li>苹果</li><li>rap</li><li>🏀</li></ul>
   // writeHtml(`
   //   <ul>
   //     <li>苹果</li>
   //     <li>rap</li>
   //     <li>🏀</li>
   //   </ul>
   // `)
</script>
</body>
</html>